<template>
  <div>
    <el-form label-width="120px">
      <el-form-item label="公司logo">
        <single-upload
          :singleUploadTitle="singleUploadTitle"
          v-model="shopgetinfo.logo"
          style="display: inline-block; margin-left: 10px; width: 100px"
        ></single-upload>
      </el-form-item>
      <el-form-item label="店铺名称">
        <span style="margin-left: 10px; font-size: 20px">{{
          shopgetinfo.name
        }}</span>
      </el-form-item>
      <el-form-item label="客服电话">
        <el-input v-model.trim="shopgetinfo.phone"
        style="width: 300px; margin-left: 10px"
        />
      </el-form-item>
      <el-form-item label="电子邮箱">
        <el-input
          v-model.trim="shopgetinfo.mailbox"
          style="width: 300px; margin-left: 10px"
        />
      </el-form-item>
      <el-form-item label="门店地址">
        <span style="margin-left: 10px">{{ shopgetinfo.address }}</span>
        <el-button
          type="primary"
          round
          @click="mapShowFn"
          style="margin-left: 20px"
          ><i class="el-icon-map-location" /> 点击选择定位</el-button
        >
      </el-form-item>

      <el-form-item>
<!--        :loading="loading"-->
        <el-button
          type="primary"
          @click.native.prevent="submit"
          v-permission="['parameter.edit']"
          >修改</el-button
        >
      </el-form-item>
    </el-form>

    <el-dialog
      title="请选择具体位置"
      :visible.sync="mapShow"
      top="5vh"
      width="800px"
      :before-close="handleClose"
    >
      <Map :initcenter="[shopgetinfo.lng, shopgetinfo.lat]" @getMap="getMap" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="mapShow = false">取 消</el-button>
        <el-button type="primary" @click="savelngLat">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="店铺装修" :visible.sync="imagesShow">
      <el-button type="primary" @click="useimage">使用模板</el-button>
      <el-button type="primary" @click="voluntarily">自行上传</el-button>
      <div
        v-if="imgaesdialog == true"
        class="demo-image"
        style="
          margin-top: 20px;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
        "
      >
        <el-image
          v-for="(item, index) in images"
          style="width: 100px; height: 100px"
          :src="item"
          @click="selectimage(index)"
          :key="item"
        ></el-image>
      </div>
      <single-upload
        v-if="imgaesdialog == false"
        :singleUploadTitle="singleUploadTitle"
        v-model="shopgetinfo.background"
        style="display: block; margin-left: 10px; margin-top: 30px"
      ></single-upload>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="determine">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from 'vuex';
import { update as updateMchShop } from "@/api/sysMch.js";
import singleUpload from "@/components/Upload/singleUpload";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import Map from "@/components/GaodeMap/index";
export default {
  components: { singleUpload, Map },
  computed: {
    ...mapGetters([
      'mchId'
    ])
  },
  directives: { permission },
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: "",
          notice: "",
          logo: "",
        };
      },
    },
    shopgetinfo: {
      type: Object,
        default: () => {
        return {
          name: "",
          notice: "",
          logo: "",
        };
      },
    },
  },
  data() {
    return {
      imagesShow: false,
      mapShow: false,
      loading: false, // 按钮防双击
      notice: "",
      singleUploadTitle: "200*200",
      lng: "",
      lat: "",
      address: "",
      formattedAddress: "",
      images: [
      ],
      imgaesdialog: true,
      codeImg:''
    };
  },

  created(){
  },
  methods: {

    determine() {
      this.imagesShow = false;
    },
    useimage() {
      this.imgaesdialog = true;
    },
    voluntarily() {
      this.imgaesdialog = false;
    },
    selectimage(index) {
      this.shopgetinfo.background = this.images[index];
      this.imagesShow = false;
    },
    changesback() {
      this.imagesShow = !this.imagesShow;
    },
    getMap(lng, lat, address) {
      this.lng = lng;
      this.lat = lat;
      this.address = address.formattedAddress;
    },
    savelngLat() {
      this.shopgetinfo.lng = this.lng;
      this.shopgetinfo.lat = this.lat;
      this.shopgetinfo.address = this.address;


      let params = {
        "address": this.shopgetinfo.address,
        // "adminId": "string",
        "areaId": this.shopgetinfo.areaId,
        "areaName": this.shopgetinfo.areaName,
        // "attach": "string",
        // "createBy": "string",
        "createDate": this.shopgetinfo.createDate,
        // "delFlag": true,
        // "expiredDate": "2022-02-11T11:47:44.053Z",
        "id": this.mchId,
        // "isvId": "string",
        "lat": this.lat,
        "linkman":  this.shopgetinfo.linkman,
        "lng": this.lng,
        "logo": this.shopgetinfo.logo,
        "mailbox": this.shopgetinfo.mailbox,
        // "mchType": 0,
        // "modifyBy": "string",
        "modifyDate": this.shopgetinfo.modifyDate,
        "name": this.shopgetinfo.name,
        // "parentMchId": "string",
        "phone": this.shopgetinfo.phone,
        // "remark": "string",
        "scopeType": this.shopgetinfo.scopeType,
        "shortName": this.shopgetinfo.shortName,
        "status": this.shopgetinfo.status,
        // "versionType": 0,
        // "yearFee": 0
      }
      updateMchShop(params)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(res);
        });
      this.mapShow = false;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    mapShowFn() {
      this.mapShow = !this.mapShow;
    },
    submit() {
      this.loading = true;
      let params = {
        "address": this.shopgetinfo.address,
        // "adminId": "string",
        "areaId": this.shopgetinfo.areaId,
        "areaName": this.shopgetinfo.areaName,
        // "attach": "string",
        // "createBy": "string",
        "createDate": this.shopgetinfo.createDate,
        // "delFlag": true,
        // "expiredDate": "2022-02-11T11:47:44.053Z",
        "id": this.mchId,
        // "isvId": "string",
        "lat": this.shopgetinfo.lat,
        "linkman":  this.shopgetinfo.linkman,
        "lng": this.shopgetinfo.lng,
        "logo": this.shopgetinfo.logo,
        "mailbox": this.shopgetinfo.mailbox,
        // "mchType": 0,
        // "modifyBy": "string",
        "modifyDate": this.shopgetinfo.modifyDate,
        "name": this.shopgetinfo.name,
        // "parentMchId": "string",
        "phone": this.shopgetinfo.phone,
        // "remark": "string",
        "scopeType": this.shopgetinfo.scopeType,
        "shortName": this.shopgetinfo.shortName,
        "status": this.shopgetinfo.status,
        // "versionType": 0,
        // "yearFee": 0
      }
      updateMchShop(params)
        .then((res) => {
          console.log(res);
          this.loading = false;
           this.$message.success("修改成功");
        })
        .catch((err) => {
          console.log(res);
        });
    },

  },
};
</script>
<style  scoped>
/deep/.el-upload__tip {
  display: none;

}
</style>
